<template>
  <div id="app">
    <div class="tabs">
    <tr>
        <td>编号:<input type="text" v-model.number="form.id"></td>
        <td>名称:<input type="text" v-model.trim="form.name"></td>
        <!-- <td>时间:{{form.time }}</td> -->
        <td><button @click="btnAdd">增加</button></td>
      </tr>
    <table class="tb">

       <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>

      </tr>

      <!-- 循环渲染的元素tr -->
      <tr v-for="(item,index) in list" :key="index" >
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.time}}</td>
        <td>
          <button @click="btnDel">删除</button>
        </td>
      </tr>

      <tr>
        <td colspan="4" v-if=" this.list.length===0">没有数据咯~</td>
      </tr>
    </table>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        { id: 1, name: '奔驰', time: '2020-08-01' },
        { id: 2, name: '宝马', time: '2020-08-02' },
        { id: 3, name: '奥迪', time: '2020-08-03' }
      ],
      form: {
        id: '',
        name: '',
        time: this.formatDate()
      }
    }
  },
  methods: {
    btnDel () {
      this.list.splice(this.inex, 1)
    },
    btnAdd () {
      if (this.form.id === '' && this.form.name === '') {
        return alert('请输入编号和名称！')
      } else {
        this.form.time = this.nowDate
        console.log(this.form)
        this.list.push(this.form)
        console.log(this.nowDate)
        console.log(this.input)
        this.form = { brand_right: 0 }
      }

      // console.log(this.form.id)
      // console.log(this.form.name)
    },
    // currentTime () {
    //   setInterval(this.formatDate, 500)
    // },
    // 显示当前时间（年月日时分秒）
    formatDate () {
      const date = new Date()
      const year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      month = month < 10 ? '0' + month : month // 如果只有一位，则前面补零

      let day = date.getDate() // 日
      day = day < 10 ? '0' + day : day // 如果只有一位，则前面补零

      // const week = date.getDay() // 星期
      // const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      // let hour = date.getHours() // 时
      // hour = hour < 10 ? '0' + hour : hour // 如果只有一位，则前面补零
      // let minute = date.getMinutes() // 分
      // minute = minute < 10 ? '0' + minute : minute // 如果只有一位，则前面补零
      // let second = date.getSeconds() // 秒
      // second = second < 10 ? '0' + second : second // 如果只有一位，则前面补零
      this.nowDate = `${year}-${month}-${day} `
    }
    // beforeDestroy () {
    //   if (this.formatDate) {
    //     clearInterval(this.formatDate) // 在Vue实例销毁前，清除时间定时器
    //   }
  }
  // clear () {
  //   clearInterval(this.nowTimes)
  //   this.nowTimes = null
  // }
}

</script>

<style>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
.tabs {
  margin:  1  00px auto;

}
</style>
